<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/script.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 20px;
        }

        .check {
            width: 400px;
            height: 300px;
            background: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500) no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .check::before {
            content: '';
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, .5);
            border: 1px solid #fff;
            position: absolute;
            top: 100px;
            left: 280px;
        }

        .check-child {
            content: '';
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            background-image: inherit;
            background-repeat: inherit;
            background-size: 400px 300px;
            background-position: -280px -100px;
            position: absolute;
            top: 100px;
            left: 0;
        }

        .drag {
            width: 400px;
            height: 50px;
            background-color: #e3e3e3;
            margin-top: 10px;
            position: relative;
        }

        .drag-child {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
        }

        .drag-tips {
            display: flex;
            align-items: center;
            justify-content: end;
            width: 95%;
            height: 100%;
            margin: 0 auto;
            font-size: 12px;
            color: #8a8a8a;
            user-select: none;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
        }

        @keyframes move {
            to {
                transform: translateX(0);
            }
        }
    </style>
</head>

<body>
    <div class="check">
        <div class="check-child"></div>
    </div>
    <div class="drag">
        <div class="drag-child"></div>
        <div class="drag-tips">
            <span>按住左边按钮向右拖动完成上方图像验证</span>
        </div>
    </div>

    <script>
        const drag = document.querySelector('.drag-child')
        const check = document.querySelector('.check-child')

        // 声明鼠标按下事件
        const dragMouseDown = event => {
            document.addEventListener('mousemove', dragMouseMove)
        }

        // 监听鼠标移动事件
        const dragMouseMove = event => {
            // 获取当前x轴坐标
            const {pageX} = event
            if (pageX < 0 || pageX > 350) {
                return false
            }
            drag.style.transform = `translateX(${pageX}px)`
            check.style.transform = `translateX(${pageX}px)`
            if(pageX >= 278 && pageX <=285) {
                console.log('通过校验')
            }
        }

        // 结束鼠标监听事件
        const dragMouseUp = event => {
            document.removeEventListener('mousemove', dragMouseMove)
            const {pageX} = event
            if(pageX < 278 || pageX >285) {
                drag.style.animation = 'move 0.5s ease-in-out'
                check.style.animation = 'move 0.5s ease-in-out'
                // 动画结束监听回调
                const animationEnd = () => {
                    drag.style.transform = `translateX(0px)`
                    check.style.transform = `translateX(0px)`
 drag.style.animation = ''
                check.style.animation = ''
                document.removeEventListener('animationend', animationEnd)
                }
               document.addEventListener('animationend', animationEnd)
            }
        }

        // 添加鼠标按下事件
        document.addEventListener('mousedown', dragMouseDown)

        // 添加鼠标弹起事件
        document.addEventListener('mouseup', dragMouseUp)        
    </script>
</body>

</html>